<template>
    <div class="LoginAndRegister-all">
        <div class="LoginAndRegister-frame">
            <div class="btn" id="LoginBtn" @click="IfIsFirst='Login'">Login</div> 
            <div class="btn" id="RegisterBtn" @click="IfIsFirst='Register'">Register</div>
            <div class="LoginOrRegister">
                <component :is="IfIsFirst"></component>
            </div>
        </div>
    </div>
</template>

<script>
import Login from './Login.vue'
import Register from './Register.vue'
export default {
    name:'LoginAndRegister',
    components:{Login,Register},
    data(){
        return{
            IfIsFirst:'Login'
        }
    }
}
</script>

<style scoped>
.LoginAndRegister-all{
    height: 726px;
    width: 100%;
    background-image: linear-gradient(to right, #eeb5eb, #a1bce1);
}
.LoginAndRegister-frame{
    height: 510px;
    width:370px;
    border: 2px solid rgb(210, 210, 238);
    border-radius: 20px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-52%);
    background-color:rgb(240, 244, 248);
}
.btn{
    width:184px;
    line-height: 60px;
    display: inline-block;
    font-weight: 1000;
    font-size: 25px;
    text-align: center;
    cursor: pointer;
    text-shadow:0px 1px 0px #2f6627;
    border-bottom:1px solid rgb(210,210,238) ;
}


.btn[id='LoginBtn']:hover{
    border-top-left-radius: 18px;
    color:#eaa3e7;
}
.btn[id='RegisterBtn']:hover {  
    
    border-top-right-radius: 18px; 
    color: #9faae0;
}
.btn:active {
    position:relative;
    bottom:1px;
}
.LoginOrRegister{
    width: 360px;
    height: 440px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-43%);
}
</style>
